<template>
  <div class="box">
    <h2>{{ num }}</h2>
    <button @click="handleNum">修改普通数据</button>
    <h2>{{ num1 }}</h2>
    <button @click="handleNum1">修改响应式数据</button>
    <h2>{{ msg }}</h2>
    <h2>{{ reMsg }}</h2>
    <button @click="handleMsg">翻转字符串</button>
  </div>
</template>

<script setup>
// 0. setup环境中才能编写组合式API
import { computed, onMounted, onUpdated, ref, watch } from 'vue';

// 逻辑关注点1：普通数据,无法自动引发视图更新
let num = 100
const handleNum = ()=>{
  num++
  console.log(num);
}

// 逻辑关注点2：响应式数据
const num1 = ref(123)   //1. ref可以替代选项式API中的data的作用
const handleNum1 = ()=>{ //2. 自定义函数替代选项式API中的methods
  num1.value+=10  //script区域操作ref数据，必须操作其value
}

// 逻辑关注点3：翻转字符串
const msg = ref('Hello')
const reMsg = computed(()=>{ //3. 替代选项式API中的computed
  return msg.value.split('').reverse().join('')
})
const handleMsg = ()=>{
  msg.value = '走你'
}

//4. watch监听
watch(num1,()=>{
  console.log('检测到了num1的变化');
})

//5. 生命周期函数
//在setup环境中，剔除了beforeCreate、created
console.log('setup环境初始化了');
onMounted(()=>{ // 替代选项式API中的mounted
  console.log('onMounted执行了，初始化渲染完成');
})
onUpdated(()=>{
  console.log('视图更新了');
})

</script>

<style lang="scss" scoped>
.box{
  border: 3px solid blue;
}
</style>